font changes, video player changes and other minor changes

1 files changed, 8 insertions, 11 deletions

diff --git a/src/app/kdrama/[id]/buttons.jsx b/src/app/kdrama/[id]/buttons.jsx
index 9f6145c..2018a1c 100644
--- a/src/app/kdrama/[id]/buttons.jsx
+++ b/src/app/kdrama/[id]/buttons.jsx
@@ -1,23 +1,21 @@
 "use client";

 import styles from "../styles/info.module.css";

 import getVideoLink from "../components/videoLink";

-import React, { useEffect, useState } from "react";

+import React, { useState } from "react";

 import { MediaPlayer, MediaProvider } from "@vidstack/react";

-import "@vidstack/react/player/styles/base.css";

-import "@vidstack/react/player/styles/plyr/theme.css";

+import "@vidstack/react/player/styles/default/theme.css";

+import "@vidstack/react/player/styles/default/layouts/video.css";

 import {

-	PlyrLayout,

-	plyrLayoutIcons,

-} from "@vidstack/react/player/layouts/plyr";

+	defaultLayoutIcons,

+	DefaultVideoLayout,

+} from "@vidstack/react/player/layouts/default";

 

 export default function EpisodesButtons({ data: episodeData, id: dramaId }) {

 	const [videoLink, setVideoLink] = useState(null);

-	const [episode, setEpisode] = useState("");

 

 	async function test(a, b, episodeText) {

 		let link = await getVideoLink(a, b);

 		setVideoLink(link);

-		setEpisode(episodeText);

 	}

 

 	return (

@@ -32,7 +30,7 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
 								onClick={(event) => {

 									test(item.id, dramaId, item.title);

 									event.currentTarget.style.backgroundColor =

-										"var(--soft-purple)";

+										"#D08770";

 								}}

 							>

 								<p>{item.title}</p>

@@ -55,7 +53,6 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
 						<MediaPlayer

 							title="dramaPlayer"

 							src={videoLink}

-							aspectRatio="16/9"

 							load="eager"

 							className={styles.VideoPlayer}

 							playsInline

@@ -63,7 +60,7 @@ export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
 							volume={0.8}

 						>

 							<MediaProvider />

-							<PlyrLayout icons={plyrLayoutIcons} />

+							<DefaultVideoLayout icons={defaultLayoutIcons} />

 						</MediaPlayer>

 						<button

 							className={styles.closeButton}